<template>
  <!-- 数字动画 -->
  <div class="animationNum">
    <ul class="fp-box">
      <!-- 需要显示多少列 -->
      <li ref="li" v-for="i in this.numArr.length" :key="i">
        <!-- 每列中的10行数字 -->
        <span v-for="num in 10" :key="num">{{ num - 1 }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    totalGmv: {},
  },
  data() {
    return {
      numberArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], //固定每列中的19行数字
      numStr: "", // 需要展示的数字字符串
      numArr: [0, 0, 0, 0, 0, 0], //默认展示6个数字数组
    };
  },
  mounted() {
    // setTimeout(() => {
    //   this.numStr = "194";
    //   this.numArr = this.numStr.split("");
    //   let numArrlen = this.numArr.length;
    //   // 展示数字的处理，不够6位前面补0
    //   for (let i = 0; i < 6 - numArrlen; i++) {
    //     this.numArr.unshift(0);
    //   }
    //   this.$refs.li.forEach((item, index) => {
    //     let ty = this.numArr[index];
    //     // 滚动数字(li标签)
    //     item.style.transform = `translateY(-${ty * 148}px)`;
    //   });
    // }, 2000);
    // setTimeout(() => {
    //   this.numStr = "875623";
    //   this.numArr = this.numStr.split("");
    //   let len = this.numArr.length;
    //   for (let i = 0; i < 6 - len; i++) {
    //     this.numArr.unshift(0);
    //   }
    //   this.$refs.li.forEach((item, index) => {
    //     let ty = this.numArr[index];
    //     item.style.transform = `translateY(-${ty * 30}px)`;
    //   });
    // }, 4000);
    // setTimeout(() => {
    //   this.numStr = "76";
    //   this.numArr = this.numStr.split("");
    //   let len = this.numArr.length;
    //   for (let i = 0; i < 6 - len; i++) {
    //     this.numArr.unshift(0);
    //   }
    //   this.$refs.li.forEach((item, index) => {
    //     let ty = this.numArr[index];
    //     item.style.transform = `translateY(-${ty * 30}px)`;
    //   });
    // }, 6000);
  },
  methods: {
    // 数据格式化(每三位加逗号)
    toThousands(num) {
      var num = (num || 0).toString(),
        result = "";
      while (num.length > 3) {
        result = "," + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
      }
      if (num) {
        result = num + result;
      }
      return result;
    },
  },
  watch: {
    totalGmv(newNum) {
      this.numStr = newNum;
      this.numArr = this.numStr.toString().split("");
      this.$refs.li.forEach((item, index) => {
        let ty = this.numArr[index];
        item.style.transform = `translateY(-${ty * 148}px)`;
      });
      this.numStr=this.toThousands(this.numStr)
      console.log(this.numStr)
    },
  },
};
</script>

<style lang="less" scoped>
.animationNum {
  .fp-box {
    display: flex;
    overflow: hidden;
    height: 120px;
    li {
      width: 60px;
      height: 60px;
      flex-direction: column;
      transition: transform 1s ease-in-out;
      span {
        text-align: center;
        // background-image: linear-gradient(90deg, #ff8464 0%, #ff6e5c 100%);
        // box-shadow: 0 3px 16px 0 rgba(3, 5, 21, 0.12);
        color: #ffffff;
        display: flex;
        display: inline-block;
        // width: 30px;
        // height: 30px;
        font-size: 90px;
        color: #ff762c;
        text-shadow: 0px 0px 11px 1px rgba(130, 9, 125, 0.67);
        font-weight: bold;
        // margin: -35px 0 -15px 0;
        font-family: MuktaMahee;
        letter-spacing: 14px;
      }
    }
  }
}
</style>